$(function(){
  var page=1;
  var pageSize=3;
  var arr=[];
 
  render();

  function render(){
    $.ajax({
      url:'/product/queryProductDetailList',
      type:'get',
      data:{
        page:page,
        pageSize:pageSize
      },
      success:function(info){
        $('tbody').html( template('tmp',info) );
        // 分页
        $("#paginator").bootstrapPaginator({
          bootstrapMajorVersion:3,
          currentPage:page,
          totalPages:Math.ceil(info.total/info.size),
          onPageClicked:function(e, o, t,p){
            //为按钮绑定点击事件 page:当前点击的按钮值
            page=p;
            render();
          },
          itemTexts:function(type, page, current){
            switch(type){
              case 'first':
              return '首页'
              case 'prev':
              return '上一页'
              case 'next':
              return '下一页'
              case 'last':
              return '尾页'
              case 'page':
              return page+'页'
            }
          },
          tooltipTitles:function(type, page, current){
            switch(type){
              case 'first':
              return '首页'
              case 'prev':
              return '上一页'
              case 'next':
              return '下一页'
              case 'last':
              return '尾页'
              case 'page':
              return '跳转到'+page+'页'
            }
          },

        });
      }
    })
  }

  // 点击显示模态框,加载二级分类
  $('.btn-add').on('click',function(){
    $('#addModal').modal('show');
    // ajax请求,加载二级分类
    $.ajax({
      url:'/category/querySecondCategoryPaging',
      type:'get',
      data:{
        page:1,
        pageSize:666
      },
      success:function(info){
        $('.dropdown-menu').html( template('tmp2',info) );
      }
    })
  })
  
  
  // 二级分类选择功能
  $('.dropdown-menu').on('click','li',function(){
     $('[name=brandId]').val($(this).data('id'));
     $('.dropdownText').text($(this).children().text());
    //  手动校验
    $("form")
    .data('bootstrapValidator')
    .updateStatus('brandId','VALID')
  })


  //图片本地预览
  $("#file").fileupload({
    dataType:"json",
    //e：事件对象
    //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
    done:function (e, data) {
      
      if(arr.length>=3){
         $('.img_box').append('<span>只能上传3遍,请不要再继续上传!</span>')
         return
       }
      $('.img_box').append(' <img width="80" height="80" src="'+data.result.picAddr+'" alt="">')
     
      arr.push(data.result);
      // console.log(arr);
       

        // 手动校验
        if(arr.length===3){
          $("form")
          .data('bootstrapValidator')
          .updateStatus('picStatus','VALID')
        }else{
          $("form")
        .data('bootstrapValidator')
        .updateStatus('picStatus','INVALID')
        }

      }
  })

  // 表单校验
  $('form').bootstrapValidator({
    // 让隐藏表单也参与校验
    excluded: [],
    // 配置的校验的小图标
    feedbackIcons: {
      valid: 'glyphicon glyphicon-thumbs-up',
      invalid: 'glyphicon glyphicon-thumbs-down',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      brandId: {
        validators: {
          notEmpty: {
            message: '请选择二级分类'
          }
        }
      },
      proName: {
        validators: {
          notEmpty: {
            message: '商品名称不能为空'
          }
        }
      },
      proDesc: {
        validators: {
          notEmpty: {
            message: '商品描述不能为空'
          }
        }
      },
      num: {
        // 必须是1-99999之间的有效数字
        validators: {
          notEmpty: {
            message: '商品库存不能为空'
          },
          // 正则校验
          regexp: {
            regexp: /^[1-9]\d{0,4}$/,
            message: '请输入有效的库存(1-99999)'
          }
        }
      },
      size: {
        validators: {
          notEmpty: {
            message: '商品尺码不能为空'
          },
          //
          regexp: {
            regexp: /^\d{2}-\d{2}$/,
            message: '请输入正确的尺码格式(xx-xx)'
          }
        }
      },
      oldPrice: {
        validators: {
          notEmpty: {
            message: '商品原价不能为空'
          }
        }
      },
      price: {
        validators: {
          notEmpty: {
            message: '商品价格不能为空'
          }
        }
      },
      picStatus: {
        validators: {
          notEmpty: {
            message: '请上传3张商品图片'
          }
        }
      }
    }
  })

  //给表单注册校验成功事件
  $("form").on('success.form.bv', function (e) {
    e.preventDefault();
 
    var param=$('form').serialize();
    param += '&picName1='+arr[0].picName+'&picAddr1='+arr[0].picAddr
    param += '&picName1='+arr[1].picName+'&picAddr1='+arr[1].picAddr
    param += '&picName1='+arr[2].picName+'&picAddr1='+arr[2].picAddr
   
    //使用ajax提交逻辑
    $.ajax({
      url:'/product/addProduct',
      type:'post',
      data:param,
      success:function(info){
       if(info.success){
         page=1;
         render();
        //  表单样式重置
        $("form")
          .data('bootstrapValidator')
          .resetForm(true)
        //手动重置
        $('.dropdownText').text('请选择二级分类');
        $('.img_box img').remove();
        //记得清空数组
        arr=[];
       }
      }
    })
});

})